import React from 'react';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { PivotItem, Pivot, PivotLinkFormat } from 'office-ui-fabric-react/lib/Pivot';

const labelStyles = {
    root: { marginTop: 10 },
  };

export default function MainNavBox() {

    function _webRenderer(link, defaultRenderer) {
        return (
            <span>
                {defaultRenderer(link)}
                <Icon iconName="Globe" style={{ color: 'black' }} />
            </span>
        );
    }

    function _iosRenderer(link, defaultRenderer) {
        return (
            <span>
                {defaultRenderer(link)}
                <Icon iconName="MobileSelected" style={{ color: 'black' }} />
            </span>
        );
    }

    function _androidRenderer(link, defaultRenderer) {
        return (
            <span>
                {defaultRenderer(link)}
                <Icon iconName="6PointStar" style={{ color: 'black' }} />
            </span>
        );
    }

    return (
        <div className='main-nav-box'>
            <div className='pages-box'>
                <Pivot aria-label="Count and Icon Pivot Example" linkFormat={PivotLinkFormat.tabs}>
                    <PivotItem headerText="Web" onRenderItemLink={_webRenderer}>
                        <Label styles={labelStyles}>Web</Label>
                    </PivotItem>
                    <PivotItem headerText="IOS" onRenderItemLink={_iosRenderer}>
                        <Label styles={labelStyles}>IOS</Label>
                    </PivotItem>
                    <PivotItem headerText="Android" onRenderItemLink={_androidRenderer}>
                        <Label styles={labelStyles}>Android</Label>
                    </PivotItem>
                </Pivot>
            </div>
            <div className='search-box'></div>
            <div className='tree-box'></div>
        </div>
    )
}